<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :inline="true" class="search-form">
      <el-form-item>
        <el-input v-model="teacherQuery.name" placeholder="讲师姓名" clearable/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="teacherQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="teacherQuery.end"
          type="datetime"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        <el-button @click="resetData()">清空</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row
      :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: 500 }"
    >
      <!-- 序号 -->
      <el-table-column label="序号" type="index" width="80" align="center"/>

      <!-- 讲师信息 -->
      <el-table-column label="讲师姓名" min-width="240">
        <template slot-scope="scope">
          <div class="teacher-info">
            <el-avatar
              :src="scope.row.avatar"
              shape="circle"
              size="60"
              class="teacher-avatar"
            >
              <i class="el-icon-user"/>
            </el-avatar>
            <div class="teacher-name">{{ scope.row.name }}</div>
          </div>
        </template>
      </el-table-column>

      <!-- 讲师头衔 -->
      <el-table-column label="讲师头衔" min-width="140">
        <template slot-scope="scope">
          {{ scope.row.level === 1 ? '高级讲师' : '首席讲师' }}
        </template>
      </el-table-column>

      <!-- 讲师资历 -->
      <el-table-column prop="intro" label="讲师简介" min-width="260"/>

      <!-- 添加时间 -->
      <el-table-column prop="gmtCreate" label="添加时间" min-width="200">
        <template slot-scope="scope">
          {{ formatDate(scope.row.gmtCreate) }}
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/teacher/save/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit" style="margin-right: 8px;">修改</el-button>
          </router-link>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeDataById(scope.row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="current"
      :page-size="size"
      :total="total"
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      class="pagination"
    />
  </div>
</template>

<script>
import teacher from '@/api/edu/teacher'

export default {
  data() {
    return {
      listLoading: true,
      list: [],
      total: 0,
      current: 1,
      size: 10,
      teacherQuery: {
        name: '',
        level: null,
        begin: '',
        end: ''
      }
    }
  },

  created() {
    this.getList()
  },

  methods: {
    formatDate(value) {
      if (!value) return ''
      const date = new Date(value)
      const yyyy = date.getFullYear()
      const MM = String(date.getMonth() + 1).padStart(2, '0')
      const dd = String(date.getDate()).padStart(2, '0')
      const hh = String(date.getHours()).padStart(2, '0')
      const mm = String(date.getMinutes()).padStart(2, '0')
      const ss = String(date.getSeconds()).padStart(2, '0')
      return `${yyyy}-${MM}-${dd} ${hh}:${mm}:${ss}`
    },
    getList(page = 1) {
      this.current = page
      this.listLoading = true

      const queryParams = {}
      Object.keys(this.teacherQuery).forEach(key => {
        if (this.teacherQuery[key] !== '' && this.teacherQuery[key] !== null) {
          queryParams[key] = this.teacherQuery[key]
        }
      })

      teacher.getTeacherListPage(this.current, this.size, queryParams)
        .then(response => {
          if (response.success === true) {
            this.list = response.data.rows || []
            this.total = response.data.total || 0
          } else {
            this.list = []
            this.total = 0
          }
        })
        .catch(error => {
          console.error('获取数据失败:', error)
          this.list = []
          this.total = 0
        })
        .finally(() => {
          this.listLoading = false
        })
    },

    handleCurrentChange(val) {
      this.current = val
      this.getList(val)
    },

    resetData() {
      this.teacherQuery = {
        name: '',
        level: null,
        begin: '',
        end: ''
      }
      this.getList()
    },

    removeDataById(id) {
      this.$confirm('确定要删除该讲师吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        teacher.deleteTeacherById(id).then(response => {
          if (response.success) {
            this.$message.success('删除成功')
            this.getList(this.current)
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
}

.search-form {
  margin-bottom: 24px;
}

.teacher-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 8px;
}

.teacher-avatar {
  border: 2px solid #e0e0e0;
}

.teacher-name {
  font-size: 16px;
  color: #333;
}

.el-table .cell {
  padding-left: 10px;
  padding-right: 10px;
}

.pagination {
  margin-top: 30px;
  text-align: center;
}
</style>
